<template>
  <router-view to="/" />
</template>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 98%;
  background-color: #f5f8fa;
}

html,
body,
#app {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
.content{
  width: 100%;
  height: 92%;
  background-color: #ffffff;
  border-radius: 15px;
}
.button_box{
  margin-bottom: 5px;
}
.tip_text{
  font-size: small;
  color: gray;
}
.title_text{
  font-size: 20px;
  font-weight: 700;
  margin-right: 10px;
}
.title_box{
  width: 80%;
  height: 10%;
  display: flex;
  align-items: flex-end;
  margin: auto;
}
.form_box{
  width: 80%;
  height: 40%;
  margin: auto;
  margin-top: 20px;
}
.select_text {
  font-size: 12px;
  font-weight: 700;
  margin-right: 10px;
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
  display: block;
  padding-bottom: 2px;
}
/*表头颜色：#fafbfc，输入框颜色：#f5f8fa，用户名称颜色：#029ef7，开关颜色：#029ef7，红色：#f58ba6，蓝色：#58bef9，绿色：#87dcae，紫色：#a684f8，黄色：#ffd02d，图标颜色：#71778d，图标背景：#f3f6f9*/
:root {
  --primary-color: #2994ff; /* 定义全局颜色变量 */
  --main-blue-color:#58bef9;
  --main-table-color:#fafbfc;
  --main-input-color:#f5f8fa;
  --main-username-color:#029ef7;
  --main-active-swich-color:#029ef7;
  --main-red-color:#f58ba6;
  --main-green-color:#87dcae;
  --main-zi-color:#a684f8;
  --main-yellow-color:#ffd02d;
  --main-icon-color:#71778d;
  --main-icon-background-color:#f3f6f9;
  --teal-color:teal;
}
.page_box {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 20px;
  padding-right: 10px;
}
.header_box {
  width: 100%;
  height: 8%;
  display: flex;
  border: none;
  border-radius: 15px 15px 0 0;

}
.header_left {
  height: 100%;
  width: 13%;
  background-color: #ffffff;
  color: #273b63;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border: none;
}
.header_right {
  width: 87%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px gainsboro solid;
  background-color: #f5f8fa;
}
.icon_box , .icon_box_d{
  background-color: var(--main-icon-background-color);
  width: 30px;
  height: 30px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  cursor: pointer;
}
.icon_box:hover{
  background-color: #d9f1fe;
  color: #029ef7;
}
.icon_box:hover svg{
  color: #029ef7;
}
.icon_box_d:hover{
  background-color: #fde3e9;
}

.icon_box_d:hover svg{
    color: #f2587d;
  }
.icon_content{
  display: flex;
  height: 100%;
}
:deep(.form_box ){
        width: 80%;
        height: 40%;
        margin: 0px;
        display: flex;
        justify-content: flex-end;
}
.center_box{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.add_box{
  width: 95%;
  height: 80%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.add_left{
  width: 10%;
  height: 90%;
}
.add_right{
 width: 70%;
 height: 90%;
}
.avatar_box{
  width: 50px;
  height: 50px;
  background-color: var(--main-username-color);
  border-radius: 5px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
.upload_box{
  border: #DCDFE6 1px solid;
  width: 100%;
  height: 10%;
  background: #ffffff;
  border-radius: 5px;
  
}
.upload_box span{
  opacity: 0;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  object-fit: contain;
}
</style>
